import React from "react";

class App extends React.Component {
    /**
     *  类组件的状态数据 state
     *  1. 定义状态数据的第一种方式：在constructor构造函数中定义
     * 
     */
    constructor() {
        // 必须要先调用父类的构造函数
        super();
        this.state = {
            count: 0
        }
    }
    render() {
        console.log('this: ', this); // this永远指向当前实例
        let { count } = this.state;
        return (
            <div>
                <h3>App</h3>
                <p>count: {this.state.count} - {count}</p>
                <div>
                    <button onClick={function () {
                        console.log('999', this); // undefined 因为事件的回调函数是window调用的

                    }}>count++</button>

                    <button onClick={() => {
                        console.log('999', this); // 指向当前App的实例对象，箭头函数没有自己的this，使用的是外部作用域 render的this
                        this.state.count++;
                        // 可以该状态数据count, 但是没有办法触发页面的更新,也就是render函数的重新调用。
                        console.log(this.state.count);
                    }}>count++</button>

                    <button onClick={() => {
                        // 通过setState改变状态数据，既可以改值，更重要的是，会触发render重新调用，重新渲染页面
                        this.setState({
                            count:this.state.count + 1
                        })
                    }}>count++</button>
                </div>
            </div>
        )
    }
}
export default App;